<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>07-beforeDestroy的使用</title>
</head>
<body>
  <div id="app">
    <h1>vue的例子</h1>
    <p>{{msg}}</p>
    <input type="button" value="销毁实例" @click="destroy">
  </div>
  <script src="../js/vue.js"></script>
  <script>
    Vue.config.productionTip = false; // 关闭生产提示
    const vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello',
        timeId: null
      },
      methods: {
        destroy() {
          this.$destroy()
        }
      },
      mounted() {
        this.timeId = setInterval(() => {
          console.log(123)
        }, 200);
      },
      beforeDestroy() {
        clearInterval(this.timeId)
      },
      destroyed() {
        window.close()
      }

      // 小结:
      /**
       * 常用的生命周期钩子函数:
       * 1. beforeCreate  已经创建了vm实例对象,但是data中的数据并未代理或劫持
       *       如果仅仅用到了vm实例对象的话，可以在这个钩子函数中来书写逻辑
       * 
       * 2. mounted:
       *      页面已经挂载完成，也就是已经使用虚拟DOM中的数据对原来的页面进行了替换，页面已经生成了，可以对页面进行进一步操作了
       *      比如可以发送请求，设置定时器，订阅消息...
       * 
       * 3. beforeDestroy: 
       *      销毁实例之前，虽然vm及上面的属性值或methods中的事件都可用，但是页面并不会更新，也就是响应式此时是无效的
       *      在这里面可以清除定时器,清除缓存,取消订阅的消息，解绑自定义事件等等...
       * 
       * 
       * 其它说明：
       * destroy:
       *      销毁了实例上的数据，数据不能使用了，自定义的事件不能使用了
       *      但是原生绑定在DOM标签对象上的事件，依然可用,
       *      就相当于是人没有气了，灵魂没有了，但是身体还在，之前的财产依然存在
       * 
       **/


    })
  </script>
</body>
</html>